<template>
  <div id="adminprewiew">
    <input type="button" id="showbook" value="添加书籍信息" @click="show_book_bar">
    <input type="button" id="showusr" value="添加用户信息" @click="show_usr_bar">

    <div class="addbook">
      <h3>输入书籍信息</h3>
      <input type="file" id="bookimg" >
      <input type="text" id="bookname" placeholder="书籍名字">
      <input type="text" id="bookprice" placeholder="书籍价格">
      <input type="text" id="bookaut" placeholder="书籍作者">
      <input type="text" id="bookintro" placeholder="书籍介绍">
      <input type="text" id="bookacc" placeholder="书籍数量">
      <input type="button" id="addbookbtn" value="确认添加" @click="add_book">
      <input type="button" id="disbook" value="隐藏" @click="dis_book_bar">
    </div>
    <div class="adduser">
      <h3>输入用户信息</h3>
      <input type="text" id="username" placeholder="姓名">
      <input type="text" id="userpwd" placeholder="密码">
      <input type="text" id="usercall" placeholder="电话号码">
      <input type="text" id="useremail" placeholder="邮箱">
      <input type="button" id="adduserbtn" value="确认添加" @click="add_user">
      <input type="button" id="disusr" value="隐藏" @click="dis_usr_bar">
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
    export default {
        name: "adminview.vue",
        methods:{
          add_book(){
            let bimg=document.getElementById('bookimg').value;
            let p=document.getElementById('bookprice').value;
            let n=document.getElementById('bookname').value;
            let a=document.getElementById('bookaut').value;
            let intro=document.getElementById('bookintro').value;
            let acc=document.getElementById('bookacc').value;
            let full_book_info={
              'img':bimg,
              'price':p,
              'name':n,
              'author':a,
              'intro':intro,
              'number':acc,
            };
            let send_mess_add_book=JSON.stringify(full_book_info);
            //send send_mess_add_book to back-end
            alert(send_mess_add_book);
          },
          add_user(){
            let uname=document.getElementById('username').value;
            let upwd=document.getElementById('userpwd').value;
            let ucall=document.getElementById('usercall').value;
            let uemail=document.getElementById('useremail').value;
            let full_user_info={
              'name':uname,
              'pwd':upwd,
              'phonenumber':ucall,
              'email':uemail,
            };
            let send_mess_add_user=JSON.stringify(full_user_info);
            alert(send_mess_add_user);


          },
          show_book_bar(){
            $('.addbook').css('display','inline');
          },
          show_usr_bar(){
            $('.adduser').css('display','inline');
          },
          dis_book_bar(){
            $('.addbook').css('display','none');
          },
          dis_usr_bar(){
            $('.adduser').css('display','none');
          },

        },
    }
</script>

<style scoped>
  .addbook{
    width: 200px;
    display: none;


  }

  .adduser{
    width: 200px;
    display: none;
  }

</style>
